<template>
  <div class="time-list-show">
    <a-table
      :columns="timeList"
      :data-source="timeListData"
      childrenColumnName="childrens"
      rowKey="timeNodeCode"
      :pagination="false"
      :indentSize="20"
      :scroll="{x: 1500}"
      :expandIcon="expandIcon"
      :rowClassName="setRowClassName"
    >
      <span slot="timeNode" slot-scope="text, record" :title="record.timeNode">
        <span v-if="record.parentCode == '-1'">
          {{ record.timeNode | ellipsis(8) }}
        </span>
        <div v-if="record.parentCode != '-1'">
          <span class="flex-half" style="padding-left: 35px">
            <a-tooltip placement="left" arrow-point-at-center>
              <template slot="title">
                <span>{{ record.reportStatus == 2 ? '已完成' : '未完成' }}</span>
              </template>
              <span :class="['dot', record.colorBg]"></span>
            </a-tooltip>
          </span>
          <span>{{ record.timeNode | ellipsis(8) }}</span>
        </div>
      </span>
      <template slot="reportUserName" slot-scope="text">
        {{ text ? text : projectManager }}
      </template>
      <span slot="realCompletionSummary" slot-scope="text, record" :title="text ? text : record.reportMemo ? record.reportMemo : ''">
        {{ text ? text : record.reportMemo ? record.reportMemo : '' }}
      </span>
      <template slot="planStartDate" slot-scope="text, record">
        {{ status === 1 ? text : record.planStartDateAudit }}
      </template>
      <template slot="completionDate" slot-scope="text, record">
        {{ status === 1 ? text : record.completionDateAudit }}
      </template>      
      <template slot="overdue" slot-scope="text, record">
        {{overdueFun(record)}}
      </template>
      <template slot="realCompletionDate" slot-scope="text, record">
        <span
          v-if="projectClass == '60' && status > 3 && status != 7 && (projectAll == 1 || projectReport == 1 || flag)"
          @click="openTimeReportOn60(record)"
          title="点击可查看报工明细"
          style="color: blue"
          >{{ text }}</span
        >
        <span v-else>{{ text }}</span>
      </template>
      <template slot="reportStatus" slot-scope="text,record">
        {{ tipText(record) }}
      </template>
    </a-table>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import moment from 'moment'

export default {
  name: 'TimeListShowIn',
  props:{
    projectId:{
      type: String,
      require:true
    },
    projectManager:{
      type: String,
      require:true
    },
    projectClass:{
      type: String | Number,
      require:true
    },
    status:{
      type: String | Number,
      default: 0
    },
    projectAll:{
      type: String | Number,
      require:true
    },
    projectReport:{
      type: String | Number,
      require:true
    },
    timeListData:{
      type: Array,
      default: []
    },
  },
  filters: {
    ellipsis(value, vlength = 25) {
      if(!value){
        return "";
      }
      if (value.length > vlength) {
        return value.slice(0, vlength) + '...'
      }
      return value
    },
  },
  data() {
    return {
      timeList: [],
      timeListNo60: [
        {
          title: '项目关键节点',
          width: 150,
          align: 'left',
          dataIndex: 'timeNode',
          key: 'timeNode',
          ellipsis: true,
          scopedSlots: { customRender: 'timeNode' },
        },
        { title: '主要完成内容', width: 150, align: 'center', dataIndex: 'jobContent', key: 'jobContent',ellipsis: true, },
        {
          title: '计划开始时间',
          width: 120,
          align: 'center',
          dataIndex: 'planStartDate',
          key: 'planStartDate',
          scopedSlots: { customRender: 'planStartDate' },
        },
        {
          title: '计划完成时间',
          width: 120,
          align: 'center',
          dataIndex: 'completionDate',
          key: 'completionDate',
          scopedSlots: { customRender: 'completionDate' },
        },
        {
          title: '负责人',
          width: 100,
          align: 'center',
          dataIndex: 'addReportUserName',
          key: 'addReportUserName',
          scopedSlots: { customRender: 'reportUserName' },
        },
        {
          title: '预计完成时间',
          width: 120,
          align: 'center',
          dataIndex: 'planCompletionDate',
          key: 'planCompletionDate',
        },
        {
          title: '实际完成时间',
          width: 120,
          align: 'center',
          dataIndex: 'realCompletionDate',
          key: 'realCompletionDate',
        },
        { title: '是否逾期', width: 110, align: 'center', dataIndex: 'overdue', key: 'overdue',scopedSlots: { customRender: 'overdue' }, },
        { title: '延误原因', width: 160, align: 'center', dataIndex: 'delayReason', key: 'delayReason' },
        {
          title: '实际完成情况',
          width: 160,
          align: 'center',
          ellipsis: true,
          dataIndex: 'realCompletionSummary',
          key: 'realCompletionSummary',
          scopedSlots: { customRender: 'realCompletionSummary' },
        },
      ],
      url: {        
        checkReportFlag: '/projectBuildTime/checkReportFlag',
      },
      colorBg: 'color-suc',
      timeList60: [
        {
          title: '项目关键节点',
          width: 150,
          align: 'left',
          dataIndex: 'timeNode',
          key: 'timeNode',
          ellipsis: true,
          scopedSlots: { customRender: 'timeNode' },
        },
        { title: '主要完成内容', width: 150, align: 'center', dataIndex: 'jobContent', key: 'jobContent',ellipsis: true, },
        {
          title: '计划开始时间',
          width: 120,
          align: 'center',
          dataIndex: 'planStartDate',
          key: 'planStartDate',
          scopedSlots: { customRender: 'planStartDate' },
        },
        {
          title: '计划完成时间',
          width: 120,
          align: 'center',
          dataIndex: 'completionDate',
          key: 'completionDate',
          scopedSlots: { customRender: 'completionDate' },
        },
        {
          title: '负责人',
          width: 120,
          align: 'center',
          dataIndex: 'addReportUserName',
          key: 'addReportUserName',
          scopedSlots: { customRender: 'reportUserName' },
        },
        {
          title: '预计完成时间',
          width: 120,
          align: 'center',
          dataIndex: 'planCompletionDate',
          key: 'planCompletionDate',
        },
        {
          title: '实际完成时间',
          width: 120,
          align: 'center',
          dataIndex: 'realCompletionDate',
          key: 'realCompletionDate',
          scopedSlots: { customRender: 'realCompletionDate' },
        },
        { title: '是否逾期', width: 110, align: 'center', dataIndex: 'overdue', key: 'overdue',scopedSlots: { customRender: 'overdue' }, },
        { title: '延误原因', width: 150, align: 'center', dataIndex: 'delayReason', key: 'delayReason',ellipsis: true, },
        {
          title: '报工进展',
          width: 150,
          ellipsis: true,
          align: 'center',
          dataIndex: 'realCompletionSummary',
          key: 'realCompletionSummary',
          scopedSlots: { customRender: 'realCompletionSummary' },
        },
        { title: '报工收益', width: 120, align: 'center', dataIndex: 'incomeMonthly', key: 'incomeMonthly' },
        { title: '报工状态', width: 100, align: 'center', dataIndex: 'reportStatus', key: 'reportStatus',scopedSlots: { customRender: 'reportStatus' } },
      ],
      flag: false,
    }
  },
  mounted() {
    if (this.projectClass == 60) {
      this.timeList = this.timeList60
      if (!(this.status > 3 && this.status != 7 && (this.projectAll == 1 || this.projectReport == 1))) {
        this.checkFlag(this.projectId)
      }
    } else {
      this.timeList = this.timeListNo60
    }
  },
  methods: {
    tipText(item) {
      if (item.reportStatus == '2') {
        // this.colorBg = 'color-suc'
        return '已完成'
      } else {
        // this.colorBg = 'color-dis'
        return '未完成'
      }
    },    
    openTimeReportOn60(record) {
      let urlJump = this.$router.resolve({
        path: `/timeNodeReport?projectBuildId=${record.projectBuildId}&timeNodeCode=${record.timeNodeCode}`,
      })
      window.open(urlJump.href, '_blank')
    },
    checkFlag(id) {
      getAction(this.url.checkReportFlag, { projectBuildId: id }).then((res) => {
        if (res.code == 200) {
          this.flag = res.result
        }
      })
    },    
    expandIcon(props) {
      if (Array.isArray(props.record.childrens) && props.record.childrens != 0) {
        if (props.expanded) {
          //有数据-展开时候图标
          return (
            <a
              style="color: 'black',margin-right:0px"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type="caret-down" style="color:#53baa7" />
            </a>
          )
        } else {
          //有数据-未展开时候图标
          return (
            <a
              style="color: 'black' ,margin-right:0px"
              onClick={(e) => {
                props.onExpand(props.record, e)
              }}
            >
              <a-icon type="caret-right" style="color:#53baa7" />
            </a>
          )
        }
      } else {
        //无数据-图标
        return <span style="margin-right:0px"></span>
      }
    },
    /**
     * 是否逾期 
     */
    overdueFun(task){
      const today =  moment(new Date()).format('YYYY-MM-DD')    // 今天
      const end_date_PLAN = task.status === 1 ? task.completionDate : task.completionDateAudit // 计划结束
      const realCompletionDate = task.realCompletionDate
      let flag = '否'
      if(realCompletionDate && moment(realCompletionDate).diff(end_date_PLAN, 'days') > 0){
        flag = '是'  // 逾期已完成
      }
      if(!realCompletionDate && moment(today).diff(end_date_PLAN, 'days') > 0){
        flag = '是'  // 逾期未完成
      }
      return flag
    },
    setRowClassName (record) {
      const {realCompletionDate, completionDate, completionDateAudit, status} = record
      const end_date_PLAN = status === 1 ? completionDate : completionDateAudit // 计划结束
      const today =  moment(new Date()).format('YYYY-MM-DD')    // 今天
      let col = ''
      // 已完成绿色
      if(realCompletionDate){
        col = 'line-green-bg'
      }
      // 延期未完成红色
      if(!realCompletionDate && moment(today).diff(end_date_PLAN, 'days') > 0){
        col = 'line-red-bg'
      }
      return col
    },
  },
}
</script>

<style lang="less" scoped>
.flex-half {
  position: relative;
  flex: 0.5;
  padding: 0;
  cursor: pointer;
  &:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 308%;
    background-color: #e2e2e2;
    top: -15px;
    left: 19px;
    position: absolute;
  }  
  .dot{left: 15px;}
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  display: inline-block;
  padding: 0;
  position: absolute;
  left: 0%;
  margin-top: 6px;
  z-index: 1;
  background-color: #ddd;
  &.color-suc {
    background-color: #57c620;
  }
  &.color-err {
    background-color: #f52833;
  }
  &.color-dis {
    background-color: #9db7f0;
  }
}
/deep/ .ant-table-row-indent.indent-level-1 {
  padding-left: 0px !important;
}
.time-list-show {
  /deep/ .ant-table-row-level-1 {background-color: #F5F7FA;
    td{border-bottom: none;}            
  }  
  /deep/ .ant-table-row-level-0 + .ant-table-row-level-1{
    .flex-half:after {top: 7px}
  }
}
/deep/ .ant-table-row{
  &.line-green-bg{color: #06bc06;}
  &.line-red-bg{color: #eb1010;}
}

</style>